import React, { useEffect, useState } from 'react'
import { Space, Table, Tag } from 'antd';
import { Button, Modal } from 'antd';
import { addApi, ListApi, searchApi } from '../../api/user';
import withLogin from '../../hoc/withLogin';
import { Checkbox, Form, Input ,Drawer} from 'antd';
import { Pagination } from 'antd';

function Chaxun() {
  const [open, setOpen] = useState(false);
  const showDrawer = () => {
    setOpen(true);
  };
  const onClose = () => {
    setOpen(false);
  };
  const [list, setList] = useState([])
  const getData = async (values) => {
    const res = await ListApi(values)
    setList(res.data.rows)
  }

  useEffect(() => {
    getData()
  }, [])
  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
      key: 'id',
      render: text => <a>{text}</a>,
    },
    {
      title: 'title',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: 'content',
      dataIndex: 'content',
      key: 'content',
    },
    {
      title: 'Action',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a>Invite {record.name}</a>
          <a>Delete</a>
        </Space>
      ),
    },
  ];
  //新增
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const onFinish =async(values) => {
    console.log('Success:', values);

    const data = {
      title: values.title,//文章标题
      content: values.content,//文章内容
      tagList: ["HTTP"],//标签  array[string]
      categoryList: ["HTTP"],//分类  array[string]
      authorId: 47529555//用户id 暂时写死47529555 登陆成功后返回的用户信息
    }
    const res=await addApi(data)
    setList(res.data.rows)
  };
  const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
  };

  //搜索

  const { Search } = Input;
  const onSearch =async(value)=>{
    const res=await searchApi(value)
    setList(res.data.rows)
  }
//重置
const rest=()=>{
 getData()
}
  return (
    <div>
      
      <Search placeholder="input search text" onSearch={onSearch} enterButton />
      <Button onClick={rest}>重置</Button>
      <Button type="primary" onClick={showModal}>
        添加
      </Button>
      <Modal
        title="Basic Modal"
        closable={{ 'aria-label': 'Custom Close Button' }}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="id"
            name="id"
            rules={[{ required: true, message: 'Please input your id!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="title"
            name="title"
            rules={[{ required: true, message: 'Please input your title!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="content"
            name="content"
            rules={[{ required: true, message: 'Please input your content' }]}
          >
            <Input />
          </Form.Item>



          <Form.Item name="remember" valuePropName="checked" label={null}>
            <Checkbox>Remember me</Checkbox>
          </Form.Item>

          <Form.Item label={null}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>

      </Modal>
      <Table columns={columns} dataSource={list}
        pagination={{
          // total: total.length,
          showSizeChanger: true,
          showQuickJumper: true,
          defaultPageSize: 10,
          showTotal: total => `Total ${total} items`
        }} />
        
    </div>
  )
}

export default withLogin(Chaxun)